<template>
  <div style="height: 100%">
    <div
      style="height: 10%;width: 100%;background: #E5E6EB;;display: flex;justify-content: center;align-items: center;flex-wrap: wrap;overflow: hidden">
      <div class="drawerText1">页面配置</div>
      <div class="drawerText2">可视化页面设置</div>
    </div>

    <div class="drawer_item">
      <Divider>缩略图导航</Divider>
      <div class="thumbnail">
        <Card :bordered="false">
          <div class="thumbnail_content">
            <div class="thumbnail_content_col">
              <div class="thumbnail_item" :class="{active:thumbnailItemCur=='a'}">a</div>
              <div class="thumbnail_item" :class="{active:thumbnailItemCur=='b'}">b</div>
              <div class="thumbnail_item" :class="{active:thumbnailItemCur=='c'}">c</div>
            </div>
            <div class="thumbnail_content_col">

            </div>
            <div class="thumbnail_content_col">
              <div class="thumbnail_item" :class="{active:thumbnailItemCur=='d'}">d</div>
              <div class="thumbnail_item" :class="{active:thumbnailItemCur=='e'}">e</div>
              <div class="thumbnail_item" :class="{active:thumbnailItemCur=='f'}">f</div>
            </div>
          </div>
        </Card>
      </div>
    </div>

    <div class="drawer_item">
      <Divider>显示日期</Divider>
      <div class="choosedate">
        <div class="choosedate2" :class="{active:tody}" ref="tody" @click="tody=!tody,thismonth=!thismonth">当天</div>
        <div class="choosedate2" :class="{active:thismonth}" ref="thismonth" @click="tody=!tody,thismonth=!thismonth">
          本月
        </div>
      </div>
    </div>
    <div class="drawer_item">
      <Divider>导航设置</Divider>
      <draggable v-model="configData.dataArr">

        <Card :bordered="true" :key="index" v-for="(item,index) in configData.dataArr" class="config">
          <template #title class="active">
            <div class="config_title" :class="{active:thumbnailItemCur==String.fromCharCode(index+97)}">
              {{String.fromCharCode(index+97)}}.
              {{ item.moudleTitle }}
            </div>

          </template>
          <template >
            <div class="itemrow" v-for="{item2,index} in item.childrens" :key="index">
              <div class="itemtext">{{item2.data.title}}</div>
              <i-switch v-model="item2.value" @on-change="changeOtherValue(item2)"
                        :disabled="item2.disabled"></i-switch>
            </div>
          </template>
        </Card>
      </draggable>

    </div>
    <div style="width: 100%;height: 8%;padding: 5%;display: flex;justify-content: space-between;overflow: hidden">
      <div style="width: 50%;padding-right: 2.5%">
        <Button type="error" style="width: 100%" @click="reset">重置</Button>
      </div>
      <div style="width: 50%;padding-left: 2.5%">
        <Button ref="myconfirmbutton" type="primary" style="width: 100%" @click="myconfirm">确认</Button>
      </div>

    </div>
  </div>
</template>

<script>
  import bus from '../common/configurationProperties'
  // import TemplateDownload from '../../system-manage/data-exchange/template-download/template-download'
  import draggable from 'vuedraggable'
  import { dataArr, dateType } from './data'

  export default {
    name: 'configurationDrawer',
    components: {  draggable },
    props: {},
    data () {
      return {
        dataArr: dataArr, //index页面取默认配置数据时，调用此数据
        tody: true,
        thismonth: false,
        thumbnailItemCur: 'a',
        configData: {}
      }
    },
    mounted () {
      let me = this
      let thumbnail_item = document.getElementsByClassName('thumbnail_item')
      _.forEach(thumbnail_item, function (v, i) {

        v.addEventListener('click', function () {
          me.thumbnailItemCur = String.fromCharCode(i + 97)
        })
      })

      if (window.localStorage.getItem('configurationManageData') != null) {
        //判断是否存在缓存
        let jsonData = JSON.parse(window.localStorage.getItem('configurationManageData'))
        this.configData = jsonData
      } else {
        this.configData = { dataArr, dateType }
      }

    },
    computed: {},
    methods: {
      changeOtherValue (val) {
        let dataArr = this.configData.dataArr
        for (let x=0;x<dataArr.length;x++) {
          let childrenArr=dataArr[x].childrens
          let valArr=[]
          if(childrenArr.includes(val)){
            valArr.push(val)
            let differenceArr=_.difference(childrenArr, valArr);
            _.forEach(differenceArr,function (v) {
              v.value=!val.value
            })
          }
        }
      },
      myconfirm () {
        bus.$emit('mydata', this.configData) //注册mydata方法，供index页面调用
        this.$emit('myconfirm', false)
        window.localStorage.setItem('configurationManageData', JSON.stringify(this.configData))
      },
      reset () {
        window.localStorage.removeItem('configurationManageData')
        this.configData = { dataArr, dateType }
        bus.$emit('mydata', this.configData) //注册mydata方法，供index页面调用
        this.$emit('myconfirm', false)
      }
    }
  }
</script>
<style scoped lang="less">
  .drawerText1 {
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #333;
    letter-spacing: 0;
    text-align: center;
    font-weight: 600;
    width: 100%;
  }

  .drawerText2 {
    /*margin-top: -35px;*/
    opacity: 0.6;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #6C8FA9;
    letter-spacing: 0;
    text-align: center;
    font-weight: 400;
    width: 100%;
  }

  .drawer_item {
    background: #f9f9f9;
    padding: 1vw
  }

  .thumbnail {
    .thumbnail_content {
      display: flex;
      justify-content: space-around;

      .thumbnail_content_col {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        flex-grow: 1;

        .thumbnail_item {
          background: #E5E6EB;
          border-radius: 2px;
          flex-grow: 1;
          height: 40px;
          margin-top: 4px;
          color: #999999;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }

        .thumbnail_item.active {
          background: #3389F4;
          color: #fff;
        }
      }
    }
  }

  .config {
    margin-top: 8px;
    border-color: #EFF2F4
  }

  .config:hover {
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.08);
  }

  .config_title {
    font-family: PingFangSC-Medium;
    font-size: 0.6rem;
    color: #999999;
    letter-spacing: 0;
    font-weight: 600;
  }

  .config_title.active {
    color: #3389F4
  }

  .choosedate {
    border: 1px solid #E5E6EB;
    border-radius: 2px;
    height: 32px;
    width: 100%;
    display: flex;

  }

  .choosedate2.active {
    background: rgba(53, 137, 245, 0.10);
    border: 1px solid rgba(53, 137, 245, 1);
    color: #3589F5;
    font-weight: 600;
  }

  .choosedate2 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
  }

  .titlecommon {
    display: flex;
    align-items: center;
    margin-bottom: 5%;
    margin-top: 5%;
  }

  .itemtext {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    font-weight: 400;
  }

  .itemrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4%;
  }

  /deep/ ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background-color: #041c34;
  }

  /deep/ ::-webkit-scrollbar-track {
    border-radius: 10px;
  }

  /deep/ ::-webkit-scrollbar-thumb {
    background-color: #007acc;
  }

  /deep/ .ivu-divider-horizontal.ivu-divider-with-text-center:before,
  /deep/ .ivu-divider-horizontal.ivu-divider-with-text-center:after {
    border-top: 1px solid rgba(229, 230, 235, 1);
  }

  /deep/ .ivu-card-extra {
    top: 0;
  }
</style>
